import React, { PureComponent } from 'react';
import { connect } from 'dva';
import '@ant-design/compatible/assets/index.css';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Descriptions, Image, Input, message, Form, Card, Row, Col } from 'antd';
import { getToken } from '@/utils/utils';
import styles from './detailModal.less';
import MaskText from '@/components/MaskText';

const { TextArea } = Input;
const mapStateToProps = (state: any) => ({
  consumerLog: state.consumerLog,
  loading: state.loading.effects['consumerLog/postObjWithRes'],
});
class ConsumerLogDetailModal extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      record: {},
    };
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  setData = record => {
    this.setState({
      record,
    });
  };

  close = () => {
    const { closeModal } = this.props;
    closeModal();
  };

  render() {
    const { modalVisible, loading, detailData } = this.props;
    const { record } = this.state;

    const lineStyle = {
      fontSize: '14px',
      lineHeight: 2.4,
      textAlign: 'center' as const,
      fontWeight: 'normal',
      color: 'rgba(0, 0, 0, 0.85)',
      border: '1px solid #d9d9d9',
    };

    let imageList = record.images ? JSON.parse(record.images) : [];

    const LogTable = (
      <table
        cellPadding="0"
        cellSpacing="0"
        style={{ width: '100%', borderCollapse: 'collapse', borderSpacing: 0 }}
      >
        <colgroup>
          <col className="col1" width="90" />
          <col className="col2" width="150" />
          <col className="col3" width="150" />
          <col className="col4" width="150" />
        </colgroup>
        <thead>
          <tr>
            <th style={lineStyle} className="col1">
              序号
            </th>
            <th style={lineStyle} className="col2">
              下载内容
            </th>
            <th style={lineStyle} className="col3">
              下载人
            </th>
            <th style={lineStyle} className="col4">
              下载时间
            </th>
          </tr>
        </thead>
        <tbody>
          {record.downloadLogs && record.downloadLogs.length > 0 ? (
            record.downloadLogs.map((item: any, index: number) => {
              return (
                <tr key={item.id}>
                  <td style={lineStyle}>{index + 1}</td>
                  <td style={lineStyle}>
                    {item?.downloadType === '0'
                      ? 'APP日志'
                      : item?.downloadType === '1'
                      ? 'T-BOX日志'
                      : '-'}
                  </td>
                  <td style={lineStyle}>{item?.userName}</td>
                  <td style={lineStyle}>{item?.createDate}</td>
                </tr>
              );
            })
          ) : (
            <tr>
              <td style={lineStyle} colSpan={4}>
                暂无记录
              </td>
            </tr>
          )}
        </tbody>
      </table>
    );
    return (
      <Modal
        title="查看"
        // style={{ width: '800px' }}
        width={800}
        bodyStyle={{ maxHeight: '700px' }}
        footer={null}
        visible={modalVisible}
        onCancel={this.close}
      >
        <Descriptions>
          <Descriptions.Item label="用户名">
            <MaskText text={record?.userName} type={'name'} />;
          </Descriptions.Item>
          <Descriptions.Item label="手机号码">
            <MaskText text={record?.phone} type="phone" />;
          </Descriptions.Item>
          <Descriptions.Item label="反馈时间">{record?.createDate}</Descriptions.Item>
          <Descriptions.Item label="车型">{record?.vehicleType}</Descriptions.Item>
          <Descriptions.Item label="车辆VIN">{record?.vin}</Descriptions.Item>
          <Descriptions.Item label="手机型号">{record?.mobileType}</Descriptions.Item>
          <Descriptions.Item label="反馈类型">
            {record?.feedbackType === '0'
              ? '功能异常'
              : record?.feedbackType === '1'
              ? '优化建议'
              : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="反馈单号">{record?.serialNumber}</Descriptions.Item>
        </Descriptions>
        <p>反馈内容：</p>
        <TextArea rows={4} value={record?.content} disabled />
        <p style={{ marginTop: '15px' }}>上传照片：</p>
        <div className={styles.imgList}>
          {imageList.length > 0 ? (
            <>
              {imageList.map(img => {
                return <Image key={img.sid} width={150} height={100} src={img.fileUri} />;
              })}
            </>
          ) : (
            <div style={{ textIndent: '2em' }}>无照片信息</div>
          )}
        </div>
        <p style={{ marginTop: '15px' }}>日志下载记录：</p>
        <div>{LogTable}</div>
      </Modal>
    );
  }
}

export default connect(mapStateToProps)(ConsumerLogDetailModal);
